<template>

    <oa-tab-page title="重庆市地理信息中心">
        <hl-card-cell title="常用功能">
            <div class="gird-content" v-show="list.length > 0">
                <div class="gird-item" @click="gridClick(item)" v-for="item in list">
                    <i class="oa-icon grid-icon" :class="item.icon" :style="{color:item.color}"></i>
                    <label class="number" v-if="item.label == '待办任务' &&new_task > 0">{{new_task}}</label>
                    <label class="gird-label">{{item.label}}</label>
                </div>
            </div>
            <div class="loading-content" v-show="list.length == 0">
                <cube-loading :size="28"></cube-loading>
                <label class="loading-text">正在加载中..</label>
            </div>
        </hl-card-cell>
        <hl-card-cell title="更多功能">
            <div class="gird-content">
                <div class="gird-item" @click="allClick">
                    <i class="oa-icon grid-icon icon-all" style="color: #888888;"></i>
                    <label class="gird-label">全部应用</label>
                </div>
                <div class="gird-item" @click="supportClick">
                    <i class="oa-icon grid-icon icon-support" style="color: #55a433;"></i>
                    <label class="gird-label">用户支持</label>
                </div>
            </div>

        </hl-card-cell>
    </oa-tab-page>
</template>

<script>
    import OaPage from "../components/oa-page";
    import {getConfig, getTokenInfo, getUserInfo, saveUserInfo} from "../config";

    import Coordinate from '../config';
    import OaTabPage from "../components/oa-tab-page";
    import HlCard from "../components/hl-card";
    import HlCardCell from "../components/hl-card-cell";

    export default {
        components: {
            HlCardCell,
            HlCard,
            OaTabPage,
            OaPage
        },
        name: "main",

        data() {
            return {
                inAppBrowserRef: null,
                list: [],
                new_task: 0,
                timer: null
            }
        },

        mounted() {
            this.loadMenus()
            this.timer = setInterval(this.loadCount, 15000)
            this.loadCount()
        },
        beforeRouteLeave(to, form, next) {
            // clearInterval(this.timer)
            console.log("离开了")
            clearInterval(this.timer)
            next()
        },

        created() {
        },
        methods: {
            loadCount() {
                let config = getConfig()
                let tokenInfo = getTokenInfo()
                this.$get(`${config.rootUrl}/app/todocount?userid=${tokenInfo.userInfo.ID}`).then((res) => {
                    console.log(res)
                    this.new_task = res
                }).catch((error) => {
                    console.log(er)
                })
            },
            supportClick() {
                window.location.href = "tel:13436151269"
            },
            rightClick() {
                this.$router.push("/notice")
            },
            gridClick: function (item) {
                console.log(item);
                if (item.url && !item.isLocal) {
                    this.openRemoteUrl(item.url);
                } else {
                    if (item.url == "location") {
                        this.$router.push('/location')
                    }
                }
            },
            allClick() {
                this.$router.push('/menus')
            },
            loadMenus() {

                let config = getConfig()
                let tokenInfo = getTokenInfo()
                console.log(tokenInfo)
                let last_update = localStorage.getItem("last_update");
                let now = new Date().getTime();
                console.log(now)
                if ((now - (parseInt(last_update)) > 1000 * 60 * 10) || last_update == null) {
                    this.$get(config.rootUrl + "/app/menu?userid=" + tokenInfo.userInfo.ID).then((res) => {
                        this.list = res
                        console.log(res)
                        localStorage.setItem("menus", JSON.stringify(res))
                        localStorage.setItem("last_update", now)
                    }).catch((error) => {
                        let menu_json = localStorage.getItem("menus")
                        this.list = JSON.parse(menu_json)
                    })
                } else {
                    let menu_json = localStorage.getItem("menus")
                    this.list = JSON.parse(menu_json)
                }

            },
            // upload() {
            //     const toast = this.$createToast({
            //         txt: '正在获取位置',
            //         type: 'loading',
            //         time: 0,
            //     })
            //     toast.show();
            //     try {
            //         let Coordinate_range = Coordinate.Coordinate_range;
            //         baidumap_location
            //             .getCurrentPosition((result) => {
            //                 // console.log(JSON.stringify(result, null, 4));
            //                 //此处获取经纬度
            //                 toast.txt = "正在打卡";
            //
            //                 let latitude = result.latitude;
            //                 let longitude = result.longitude;
            //                 let config = getConfig();
            //                 let tokenInfo = getTokenInfo();
            //                 if (longitude <= Coordinate_range.x1 && longitude >= Coordinate_range.x0 && latitude <= Coordinate_range.y1 && latitude >= Coordinate_range.y0) {
            //                     let url = config.rootUrl + "/OA_Attendence/UserCard?type=app&Dcqtech_Token=" + tokenInfo.token.TokenId;
            //                     this.$get(url).then((res) => {
            //                         toast.hide();
            //                         this.$createDialog({
            //                             type: 'alert',
            //                             title: '成功',
            //                             content: '打卡成功',
            //                             icon: 'cubeic-ok'
            //                         }).show()
            //                     }).catch((error) => {
            //                         toast.hide();
            //                         this.$createToast({
            //                             txt: '网络错误',
            //                             type: 'error',
            //                             time: 1500,
            //                         })
            //                     })
            //                 } else {
            //                     toast.hide();
            //                     this.$createDialog({
            //                         type: 'alert',
            //                         title: '提示',
            //                         content: '打卡位置不正确',
            //                         icon: 'cubeic-alert'
            //                     }).show()
            //                 }
            //             }, (error) => {
            //                 this.$createDialog({
            //                     type: 'alert',
            //                     title: '提示',
            //                     content: '定位失败,请重试',
            //                     icon: 'cubeic-alert'
            //                 }).show()
            //             });
            //     } catch (e) {
            //         console.log(e);
            //     }
            //
            // },


            openRemoteUrl(url) {
                try {
                    let config = getConfig()

                    let tokenInfo = getTokenInfo();
                    let inAppBrowserRef = cordova.InAppBrowser.open(config.rootUrl + '/Token/Goto?tokenId=' + tokenInfo.token.TokenId + '&url=' + encodeURIComponent(url), '_blank', 'location=no,toolbar=no');
                    inAppBrowserRef.addEventListener('loadstart', this.loadstart);
                    inAppBrowserRef.addEventListener('loadstop', this.browserLoadstop);
                    inAppBrowserRef.addEventListener('loaderror', this.OnAppError);
                    inAppBrowserRef.addEventListener('exit', this.inAppEvent);
                    this.inAppBrowserRef = inAppBrowserRef;
                } catch (e) {
                    console.log(e)
                }

            },
            loadstart(event) {
                console.log(event)
                let url = event.url;
                if (url.indexOf(`/WorkFlowRuntime/Attachment/download?`) > -1) {
                    window.nativeLink.openUrl(url)
                }
            },
            browserLoadstop(event) {
                console.log(event)

                if (event.url.indexOf('dcqtech_app_close_page.html') > 0) {
                    this.inAppBrowserRef.close();
                    this.loadCount()
                }


            },
            OnAppError(event) {

            },
            inAppEvent(event) {

            }
        },

    }
</script>

<style lang="less">
    @import "../assets/style/theme";

    .head {
        background: #ffffff;
        height: 120px;
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: row;

        .head-pic {
            width: 70px;
            height: 70px;
            margin-left: 16px;
            border-radius: 50%;
            background: #ffffff;
            border: solid 2px white;

        }
        .info {
            margin-left: 16px;
            display: flex;
            flex-direction: column;
            .nickname {
                color: gray;
                margin-top: 0;
                margin-bottom: 12px;
                font-size: 18px;

            }
            .job {
                color: @app-theme-color;
                margin-top: 0;
                margin-bottom: 0;
                font-size: 14px;
            }
        }

    }

    .btn-logout {
        /*height: 44px;*/
        width: 90%;
        margin: auto;
        margin-top: 32px;

    }

    .grid {
        margin-top: 10px;
        background: white;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        .grid-item {
            width: 25%;
            height: 120px;
            display: flex;
            box-sizing: border-box;
            position: relative;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-right: solid 1px @app-border-color;
            border-bottom: solid 1px @app-border-color;
            .number {
                background: #f05d34;
                width: 18px;
                height: 18px;
                color: #fff;
                line-height: 18px;
                right: 10px;
                top: 0px;
                position: absolute;
                border-radius: 50%;
            }
            &:active {
                background: darken(#fff, 5%);
            }
            &:nth-child(4) {
                border-right: none;
            }
            .oa-icon {
                font-size: 36px;
                &.red {
                    color: red;
                }
            }
            .icon-label {
                font-size: 14px;
                margin-top: 8px;
                color: #888888;
            }

        }
    }

    .gird-content {
        display: flex;
        flex-direction: row;
        padding-top: 16px;
        margin-top: 12px;
        flex-wrap: wrap;
        .gird-item {
            width: 25%;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            position: relative;
            .number {
                display: flex;
                align-items: center;
                justify-content: center;
                background: #f05d34;
                width: 18px;
                height: 18px;
                color: #fff;
                font-size: 12px;
                line-height: 18px;
                right: 10px;
                top: 0px;
                position: absolute;
                border-radius: 50%;
            }
            &:active {
                background: darken(#fff, 5%);
            }
            .grid-icon {
                font-size: 36px;
            }
            .gird-label {
                text-align: center;
                margin-top: 8px;
                font-size: 12px;
                font-weight: 500;
                color: #2c2c2c;
            }
        }

    }

    .loading-content {
        height: 80px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .loading-text {
            font-size: 12px;
            color: #888888;
            margin-top: 4px;
        }
    }

</style>